﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="jquery-1.7.1.min.js"></script>
    <script src="knockout-2.1.0.js"></script>
    <link rel="stylesheet" href="jqx.base.css" type="text/css" />

</head>
<body>
    <div>
        <span data-bind="text:title"></span>
        <div data-bind="event: { mouseover: enableDetails, mouseout: disableDetails }">
            Mouse over me
        </div>
        <div data-bind="visible: detailsEnabled" style="border: 1px solid">
            鼠标移入显示，移出隐藏
        </div>

        <input data-bind="click: focus" />
        <span data-bind="visible: isSelected">The textbox has focus</span>


        <!-- ko foreach: checkboxList -->
        <input type="checkbox" data-bind="value: value, checked:checked" />
        <span data-bind="text:itemName"></span>
        <!-- /ko  -->


    </div>
    <script type="text/javascript">
        var viewModel = {
            title: "event的学习",
            //event
            detailsEnabled: ko.observable(false),
            enableDetails: function () {
                this.detailsEnabled(true);
            },
            disableDetails: function () {
                this.detailsEnabled(false);
            },
            //click
            isSelected: ko.observable(false),
            focus: function () { this.isSelected(true); },
            //checked
            checkboxList: ko.observableArray([{ itemName: "选1", value: 1, checked: false }, { itemName: "选2", value: 2, checked: true }]),
            chosenItems: ko.observableArray(),
        };
        ko.applyBindings(viewModel);
    </script>
</body>
</html>
